<template>
  <div>
    <div>
      <el-button @click="showDialog('add')">新增</el-button>
    </div>
    <el-table :data="data.tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="product_type_name" label="产品类型"  />
      <el-table-column prop="product_type_code" label="产品类型编码" />
      <el-table-column prop="product_type_desc" label="产品类型描述" />
      <el-table-column prop="sort_code" label="排序码" />
      <el-table-column prop="sort_code" label="操作" >
        <template #default="scope">
          <el-button @click="showDialog('edit',scope.row)">编辑</el-button>
          <el-button @click="deleteOne(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="data.dialogVisible" title="管理产品类型">
      <el-form :model="data.form" label-width="auto" style="max-width: 600px">
        <el-form-item label="产品类型">
          <el-input v-model="data.form.product_type_name" />
        </el-form-item>
        <el-form-item label="产品类型编码">
          <el-input v-model="data.form.product_type_code" />
        </el-form-item>
        <el-form-item label="产品类型描述">
          <el-input v-model="data.form.product_type_desc" />
        </el-form-item>
        <el-form-item label="排序码">
          <el-input-number v-model.number="data.form.sort_code" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="data.dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import http from "@/utils/http"
import {onMounted, reactive} from "vue"
import {
  GetProductTypeList,
  DeleteProductType,
  GetProductTypeDetail,
  CreateProductType,
  UpdateProductType
} from "@/service/product_type"
const data = reactive({
  tableData:[],
  total:0,
  dialogVisible:false,
  form:{},
  dialogType:""
})
const getProductTypeList = async ()=>{
  const res = await GetProductTypeList({
    page_num:1,
    page_size:10
  })
  data.tableData = res.data.list
  data.total = res.data.total
  console.log(data.tableData)
}

const deleteOne = async(val)=>{
  console.log(val)
  const res = await DeleteProductType({id:val.id})
  console.log(res)
  await getProductTypeList()
}

const showDialog = async (val,row)=>{
  data.dialogType = val
  console.log(val,row)
  data.dialogVisible = true
  if(val==='add'){}
  if(val==='edit'){
    const res = await GetProductTypeDetail({
        id:row.id
    })
    console.log(res)
    data.form = res.data
  }
}
const onSubmit = async ()=>{
  if(data.dialogType==='add'){
    await CreateProductType(data.form)
  }else if(data.dialogType==='edit'){
    await UpdateProductType(data.form)
  }
  data.dialogVisible = false
  data.form = {}
  await getProductTypeList()
}
onMounted(async()=>{
  await getProductTypeList()
})

</script>